import './index.scss'
import Logindata from '../../components/Login/index'
import Popup from '../../components/Props/index'
import All from '../../components/All/index'
import { useState, useEffect } from 'react'
import { Popover } from 'antd';


const Navigation = () => {
    const [init, SetInit] = useState(false)
    const [userData, setUserData] = useState(null);
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const Login = () => {
        SetInit(true)
    }
    const closeModal = () => {
        SetInit(false)
    }
    const checkLoginStatus = () => {
        const token = localStorage.getItem('token');
        if (token) {
            setIsLoggedIn(true);
            const image = localStorage.getItem('image');
            const name = localStorage.getItem('name');
            const userid = localStorage.getItem('userid');
            setUserData({ image, name, userid });
        } else {
            setIsLoggedIn(false);
            setUserData(null);
        }
    };

    const back = () => {
        window.location.href = '/home'
        localStorage.removeItem('token');
        localStorage.removeItem('image');
        localStorage.removeItem('name');

    }

  const mine=()=>{
    window.location.href='/mine'
  }
  useEffect(() => {
    checkLoginStatus();
  }, []);


 
//   在线设计
const design=()=>{
    window.location.href='/design2'
}
    return (
        <div className='Navigation'>
            <div className='Navigation_left'>
                <img src="https://s.ibaotu.com/next/img/new/btlogo2.9f48.png" alt="" />
            </div>
            <div className='Navigation_center'>
                <ul >
                    <li><span className='sp'>视频</span> | <span>实拍</span>
                        <div className='dankuang'>
                            <Popup></Popup>
                        </div>
                    </li>

                    <li><span>广告</span>
                        <div className='dankuang'>
                            <Popup></Popup>
                        </div>
                    </li>
                    <li><span>PPT</span>
                        <div className='dankuang'>
                            <Popup></Popup>
                        </div>
                    </li>
                    <li><span>摄像</span> | <span>人像</span>
                        <div className='dankuang'>
                            <Popup></Popup>
                        </div>
                    </li>
                    <li><span>全部素材</span>
                        <div className='quanbu'>
                            <All></All>
                        </div>
                    </li>
                    <li><span>企业站</span>
                        <div className='dankuang'>
                            <Popup></Popup>
                        </div>
                    </li>
                    <li><span>政务图库</span>

                    </li>
                    <li><span>在线设计</span>
                        <div className='online'>
                            <div className='online_top'>
                                <div className='online_left' onClick={design}>
                                    在线设计
                                </div>
                                <div className='online_right'>
                                    智能抠图
                                </div>
                            </div>
                            <div className='online_bottom'>
                                <img src="../src/assets/images/8.png" alt="" />
                            </div>
                        </div>
                    </li>
                    <li><span>更多工具</span>
                        <div className='tools'>
                            <ul>
                                <li style={{ color: 'red' }}>热门活动</li>
                                <li><span>精品专题</span></li>
                                <li><span>个性推荐</span></li>
                            </ul>
                        </div>
                    </li>
                </ul>

            </div>
            <div className='Navigation_right'>
                <ul>
                    <li><span>企业VIP授权</span>
                        <div className="popup">
                            <img src='../src/assets/images/3.png' className='Vip'></img>
                        </div>
                    </li>
                    <li><span>个人VIP</span>
                        <div className='vip'>
                            <img src="../src/assets/images/7.png" alt="" />
                        </div>
                    </li>

                </ul>
                {isLoggedIn && userData && (
                    <Popover placement="bottomRight" content={
                        <div className='user' style={{ width: '350px', height: '400px' }}>
                            <div style={{ width: '100%', height: '60px', display: 'flex', alignItems: 'center' }}>
                                <img src={userData.image} style={{ width: '50px', height: '50px', borderRadius: '50%' }}></img>
                                <span style={{ color: "#ccc" }}>包图号:{userData.userid}</span>
                                <span style={{ width: '80px', height: '20px', background: "#ccc", display: "block", borderRadius: "20px", textAlign: "center", lineHeight: "20px", marginLeft: "70px" }} onClick={mine} className='mind'>个人中心</span>
                            </div>
                            <button onClick={back}>退出登录</button>
                        </div>
                    }>
                        <img src={userData.image} className='txtx' />
                    </Popover>

                )}
                {!isLoggedIn && (
                    <div>
                        <img src='../src/assets/images/1.png'></img>
                        <span className='bold' onClick={Login}>登录/注册</span>
                    </div>
                )}
            </div>
            {
                init && <Logindata onClose={closeModal} ></Logindata>
            }
        </div>

    )
}
export default Navigation